<template>
<div class="m-25 mt-65">
    <div class="normal-box-mod">
      <!-- title -->
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>车辆列表</h2>
        </div>
      </div>

	  <!--  -->
	  <div class="normal-box-bd">
        <div class="clearfix mb-20">
			<Row>
                <Col span="5">
                    <sele @ProvinceData="childByValue"></sele>
                </Col>
                <!-- <Col span="12">
                    <DatePicker v-model="queryData.startTime" format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="开始时间" style="width: 200px"></DatePicker>
                    &nbsp;-&nbsp;
                    <DatePicker v-model="queryData.endTime" format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="结束时间" style="width: 200px"></DatePicker>
                </Col> -->
            <Button type="primary" custom-icon="iconfont icon-chaxun"  size="small" @click="getlist">查询</Button>
            </Row>
		</div>
	  </div>
       <div class="mb-20">
            <i-table stripe highlight-row border :content="self" :columns="Tcolumns" :data="carlist"></i-table>
        </div>
        <div class="page">
          <Page :total="query.totalRecord" :page-size="query.limit" :current="query.page" show-total show-elevator @on-change="changePage"></Page>
        </div>

	</div>
</div>
	

</template>

<script type="text/javascript">
import Request from "@/api/request.js";
import sele from "@/view/test/city.vue";
export default {
	components: {sele,},
 	data () {
		return {
			carlist: [],
			map: null,
			drv: null,
			flog: 0, // 标记地图中是否有轨迹
			car: {
				name: '',
				list: []

			},
			
			query: {
                limit: 10,
                page: 1,
                sbType: 2,
                totalRecord: ''
            },
            Tcolumns: [
                { align:"center", title: "机器编号", key: "code", minWidth: 120},
                { align:"center", title: "机器名称", key: "factoryname", minWidth: 80},
                { align:"center", title: "所在地址", key: "address", minWidth: 80},
                { align:"center", title: "社区名称", key: "name", minWidth: 80},
                { align:"center", title: "插入姓名", key: "insertName", minWidth: 80},
                { align:"center", title: "插入时间", key: "insertTime", minWidth: 80},
            ]
		}
    },
     

  mounted () {
  },
  async created () {
	await setTimeout({},1000)
	let area = window.defArea
	this.query.provid = area[0]
	this.query.cityid = area[1]
	this.query.distid = area[2]
	this.getlist()
  },
  methods: {
	 
	// 获取车牌
    async getlist() {
      let res = (await Request('get',this.query,'gcDustbin')).data
      console.log('车辆列表',res);
      this.carlist = res.list
      this.query.totalRecord = res.totalRecord
    },

    // 查询
    inQuire () {
        const that = this
        that.query.totalRecord = undefined
        that.query.limit = 10
        that.query.page = 1
        this.getlist()
    },
    // 换页
    changePage (index) {
        this.query.page = index
        this.getlist()
    },

	// 六级联动数据获取
    childByValue(data) {
      let area = this.query;
      area.provid = data.provid || "";
      area.cityid = data.cityid || "";
      area.distid = data.distid || "";
      area.strtid = data.strtid || "";
      area.commid = data.commid || "";
      area.comminid = data.comminid || "";
    },

  },
  
}

</script>

<style scoped>
	#main{
		width: 100%;
		height: 100%;
		position: relative;
	}
	#carmap {
	  width: 100%;
	  height: 72vh;
	  z-index: 10;
	}
	#list{
		width: 350px;
		height: 600px;
		top: 100px;
		z-index: 100;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: #AAA9A9 3px 3px 3px;

		position: absolute;
		}
	#dian{
		position: absolute;
		width: 20px;
		height: 100px;
		top: 250px;
		left: 330px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #13C2C2;
		justify-content: space-around;
	}
	#demo-header{
		width: 100%;
		height: 10%;
		background-color: #2894FF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	#demo-list{
		width: 100%;
		height: 80%;

		/* background-color: #00FFFF; */
	}
	.list-info{
		width: 100%;
		height: 10%;
		font-weight:700 ;
		border-bottom: #F0F0F0 1px solid;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	.text{
		width: 27%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#demo-page{
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	dl,dt,dd,ul,li {
	  margin:0;
	  padding:0;
	  list-style:none;
	}
	p {
		font-size:12px;
	}
	dt {
	  font-size:14px;
	  font-family:"微软雅黑";
	  font-weight:bold;
	  border-bottom:1px dotted #000;
	  padding:5px 0 5px 5px;
	  margin:5px 0;
	}
	dd {
	  padding:5px 0 0 5px;
	}
	li {
	  line-height:28px;
	}
</style>
